<!--
 * @Description: 数据库恢复
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:29:53
 * @LastEditTime: 2021-10-03 11:26:38
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="page-content">
    <div class="info">
      <h1 class="title">数据库恢复</h1>
      <el-alert
        title="将需要恢复的数据库备份文件上传到服务器并进行数据恢复，执行数据恢复会删除已经存在的网元相关数据！"
        type="warning"
        center
        show-icon
      ></el-alert>
      <el-form :model="form" class="form" :rules="rules" ref="ruleForm">
        <el-upload
          class="upload-box"
          ref="upload"
          accept=".zip"
          action
          :multiple="false"
          :limit="1"
          :on-change="handleChange"
          :on-exceed="handleExceed"
          :before-remove="beforeRemove"
          :on-remove="remove"
          :file-list="fileList"
          :auto-upload="false"
          :before-upload="beforeUpload"
          :http-request="handleUpload"
          :on-error="error"
          :on-success="successResave"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload"
          >上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
        </el-upload>
        <el-progress v-show="fileList.length > 0" :percentage="percentage" :color="customColors"></el-progress>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      percentage: 0,
      timer: null,
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    };
  },
  // 销毁
  beforeDestroy () {
    // 执行销毁
    this.cleanTimer();
    this.$ws.unregisterDgQueueListener(this.dealStart);
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.$ws.registerDgQueueListener('pg_sql.database.restore', _this.dealStart);
    });
  },
  methods: {
    // 限制上传数量
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件。`);
    },
    // 删除确认
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 删除
    remove (file, fileList) {
      this.fileList = fileList;
    },
    // 上传格式过滤
    handleChange (file, fileList) {
      let _this = this;
      let fileTemp = file.raw;
      if (fileTemp) {
        if (fileTemp.type !== 'application/x-zip-compressed') {
          _this.$message({
            type: 'warning',
            message: '附件格式错误，请删除后重新上传！'
          });
        } else {
          this.fileList = fileList;
        }
      } else {
        _this.$message({
          type: 'warning',
          message: '请上传附件！'
        });
      }
    },
    // 上传判断
    submitUpload () {
      if (this.fileList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请上传附件！'
        });
        return;
      } else {
        this.$refs.upload.submit();
        this.percentage = 10;
        this.timer = setInterval(() => {
          if (this.percentage < 99) {
            this.percentage += 1;
          }
        }, 500);
      }
    },
    // 清除定时器
    cleanTimer () {
      // 清除定时器
      clearInterval(this.timer);
    },
    // 自定义上传实现
    handleUpload (file) {
      const param = new FormData();
      param.append('file', file.file);
      param.append('strategy', 'false');
      this.$http.post({
        url: '/api/resource/backup/database/restore',
        data: param
      });
    },
    // 处理结果推送
    dealStart (data) {
      if (data && data.payload) {
        // 恢复数据与当前软件一致
        if (data.payload.item) {
          if (data.payload.status) {
            if (data.payload.item === 'complete') {
              this.cleanTimer();
              this.percentage = 100;
              this.$message.success('执行完成，请重启网管！');
            }
          } else {
            this.cleanTimer();
            this.percentage = 0;
            this.$message.error(data.payload.item);
          }
        } else {
          this.cleanTimer();
          this.percentage = 0;
          // 恢复数据与当前软件版本不一致 或  系统补丁版本与恢复的补丁版本不一致
          this.$message.error('恢复数据与当前软件版本不一致!');
        }
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;

  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    background: #fff;

    ::v-deep .el-alert {
      margin-top: 10px;
    }

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }

    .upload-box {
      width: 50%;
    }

    ::v-deep .el-progress {
      width: 50%;
      margin-top: 5px;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .page-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }

      .upload-box {
        width: 100%;
      }

      ::v-deep .el-progress {
        width: 100%;
        margin-top: 5px;
      }
    }
  }
}
</style>